<template>
  <div class="add-quest">
    <h3>题目信息</h3>
    <ul class="oul">
      <li>
        <span> 题干 </span>
        <el-input v-model="examObj.title" placeholder="请输入内容"></el-input>
      </li>
      <Editer @SendEditer="acceptId" title="题目信息" type="questions_stem" />
      <Select
        @sendId="acceptId"
        title="考试"
        type="exam_name"
        selId="exam_id"
      />
      <Select
        @sendId="acceptId"
        title="课程"
        type="subject_text"
        selId="subject_id"
      />
      <Select
        @sendId="acceptId"
        title="题目"
        type="questions_type_text"
        selId="questions_type_id"
      />
      <Editer @SendEditer="acceptId" title="答案" type="questions_answer" />
    </ul>
    <el-button type="primary" @click="dialogVisible = true">提交</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subExam">确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addExam } from "@/api/exam";
import Select from "./components/Select.vue";
import Editer from "./components/Editer.vue";

export default {
  data() {
    return {
      // 数据冻结
      // list: Object.freeze([
      //   {
      //     title: "标题1",
      //   }
      // ]),
      // 添加试题数据
      dialogVisible: false,
      examObj: {
        // 用户id
        user_id: JSON.parse(sessionStorage.getItem("userInfo")).user_id,
      },
    };
  },
  components: {
    Select,
    Editer,
  },
  methods: {
    acceptId({ type, value }) {
      // 添加的是普通属性
      this.examObj[type] = value;
      // this.$set设置访问器属性
      // this.$set(this.examObj, "questions_stem", value)
    },
    subExam() {
      addExam(this.examObj).then(res => {
        this.dialogVisible = false
      })
    },
  },
};
</script>

<style scoped>
.add-quest {
  padding: 20px;
}
.oul li {
  padding: 10px 0;
}
.oul li span {
  display: inline-block;
  padding: 10px 0;
}
</style>